<template>
	<image  :src="msg.saveImg||info.imgUrl" :style="{width: `${layout.w}rpx`,height:`${layout.h}rpx`}" class="msg_pic" mode="aspectFit"/>
</template>

<script>
	export default{
		components:{
		},
		props:{
			info:{
				required:true,
				type:Object
			},
			msg:{
				required:true,
				type:Object
			}
		},
		data(){
			return {
				run:false
			}
		},
		computed:{
			layout(){
				const sizeLimit = 300
				
				if(this.info.imgWidth<sizeLimit&&this.info.imgHeight<sizeLimit){
					return{
						w:this.info.imgWidth,
						h:this.info.imgHeight
					}
				}
				
				if(this.info.imgWidth>this.info.imgHeight){
					return {
						w:sizeLimit,
						h:this.info.imgHeight*sizeLimit/this.info.imgWidth,
					}
				}
				
				if(this.info.imgHeight>this.info.imgWidth){
					return{
						w:this.info.imgWidth*sizeLimit/this.info.imgHeight,
						h:sizeLimit,
					}
				}
				return{
					w:sizeLimit,
					h:sizeLimit,
				}
			}
		},
		mounted() {
			if(this.msg.run){
				this.run = true
				setTimeout(() => {
					this.run = false
					this.msg.run = false
				}, 3000);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.msg_pic{
		max-width: 400rpx;
	}
</style>
